<template>
  <div class="header-wrapper">
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple __handCursor">
          <span class="title"> xxxxxx管理系统 </span>
        </div>
      </el-col>

      <el-col :span="8">
        <div
          class="grid-content bg-purple-light __text-center"
          style="font-weight: bold">
          {{ route.meta.title }}
        </div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple __text-right">
          <el-dropdown trigger="click" class="dropDown-wrapper">
            <div class="avatar-wrapper __handCursor">
              <el-avatar
                size="small"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              >
              </el-avatar>
              <span>roarpanda</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>退出登录</el-dropdown-item>
                <!-- <el-dropdown-item>新增</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item> -->
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
// import { useRoute } from 'vue-router';
const route = useRoute()
</script>
<style scoped lang="scss">
.header-wrapper {
  position: relative;
  width: 100%;
  line-height: 66px;
  background-color: var(--primary-theme);
  color: var(--primary-text-color);
  padding: 0 20px;
  box-sizing: border-box;

  .title{
    font-weight: bold;
    font-size: 20px;
  }
  .dropDown-wrapper {
    line-height: 66px;
    .avatar-wrapper {
      display: flex;
      align-items: center;
      color: var(--primary-text-color);
      .el-avatar{
        margin-right: 5px;
      }
    }
  }
}
</style>
